<template>
    <div>
        <my-header>许愿墙</my-header>
        <my-input v-model="dream"></my-input>
        <selet-img :cur="cur" @getimg="getImg"></selet-img>

        <button class="dream-btn" :disabled="disabled" @click="dreamFn">{{text}}</button>

        <div class="dream-item" @touchstart="touchStart($event, item)" @touchmove="touchMove(item, $event)" @touchend="touchEnd" v-for="(item, i) in dreams" :key="item.id" :style="{
        backgroundImage: 'url(' + item.img + ')',
        left: item.left + 'px',
        top: item.top + 'px'
        }">
            <span class="del" @click.stop="del(i)">×</span>
            <p class="dream-content" @click.stop="exit(item, i)">{{item.dream}}</p>
        </div>
    </div>
</template>

<script>
import myHeader from '@/components/myHeader/myHeader'
import MyInput from '@/components/myInput/MyInput'
import seletImg from '@/components/selectImg/seletImg'
export default {
    name: '',
    components: {
        myHeader,
        MyInput,
        seletImg
    },
    data() { 
        return {
            dream: '',
            text: '再想想',
            disabled: true,
            img: '',
            isExit: false, // 定义是否是编辑
            dreams: [],
            cur: null, // 当前被选中的图片的索引值
            drag: false, // 表示是否开始拖拽
            startX: 0,
            startY: 0,
            ind: null // 记录当前编辑的是第几个愿望
        }
    },
    created() {
        if(localStorage.getItem('dreams')) {
            this.dreams = JSON.parse(localStorage.getItem('dreams'))
        } else {
            this.dreams = []
        }
    },
    methods:{
        getImg(obj) {
            this.img = obj.img
            this.cur = obj.cur
            if(this.dream && this.img ) {
                this.disabled = false
                this.text = '许愿'
            } else {
                this.disabled = true
                this.text = '再想想'
            }
        },
        // 按钮逻辑
        dreamFn() {
            if(!this.isExit) { // 在不是编辑的情况下
                let obj = {
                    dream: this.dream,
                    img: this.img,
                    id: new Date().getTime(),
                    left: Math.random()*300,
                    top: Math.random()*400 + 220,
                    cur: this.cur
                }
                if(this.dreams.length < 6) {
                    this.dreams.push(obj)
                } else {
                    this.$loading.show('最多能许六个愿望')
                    setTimeout(() => {
                        this.$loading.hide()
                    }, 1000);
                }
            } else {
                this.dreams[this.ind].dream = this.dream
                this.dreams[this.ind].img = this.img
                this.isExit = false
            }
            this.cur = null
            this.dream = ''
            localStorage.setItem('dreams', JSON.stringify(this.dreams))
        },

        // 拖拽的逻辑
        touchStart(e, item) {
            this.drag = true
            this.startX = e.touches[0].pageX - item.left
            this.startY = e.touches[0].pageY - item.top
        },

        touchMove(item, e) {
            if(this.drag) {
                // console.log(e);
                let left = e.touches[0].pageX - this.startX
                let top = e.touches[0].pageY - this.startY
                
                item.left = left
                item.top = top
                // console.log(left, top);
                localStorage.setItem('dreams', JSON.stringify(this.dreams))
            }
        },

        touchEnd() {
            this.drag = false
        },

        // 删除愿望
        del(i) {
            this.dreams.splice(i, 1)
            this.cur = null
            this.dream = ''
            localStorage.setItem('dreams', JSON.stringify(this.dreams))
        },

        // 编辑的逻辑
        exit(item, i) {
            // console.log(1);
            this.isExit = true
            this.text = '编辑'
            this.dream = item.dream
            this.img = item.img
            this.cur = item.cur
            this.ind = i
        }
    },

    watch: {
        dream(to, from) {
            // console.log(to);
            if(to && this.img) {
                if(!this.isExit) {
                    this.disabled = false
                    this.text = '许愿'
                } else {
                    this.disabled = false
                    this.text = '编辑'
                }
                
            } else {
                this.disabled = true
                this.text = '再想想'
            }
        }
    }
}
</script>

<style scoped>
.dream-btn {
  width: 90px;
  display: block;
  line-height: 30px;
  margin: 20px auto;
  background-color: yellowgreen;
  border: none;
  border-radius: 8px;
  outline: none;}
  .dream-btn[disabled] {
  background-color: #ccc;}
  .dream-item {
  position: absolute;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  }
  .del {
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  font-size: 20px;
  background-color: #fff;
  top: 0;
  right: 0;}
  .dream-content {
  text-align: center;
  margin-top: 25px;
  color: yellow;
  }
</style>